<template>
  <section>
    <div class="teacher-info-top">
      <div class="teacher-info-top-bg" :style="{background: `url(${teacherInfo.avatarUrl})`}"></div>
      <img alt="avatar" class="teacher-avatar" :src="teacherInfo.avatarUrl">
      <div class="desc">
        <p class="name">{{ teacherInfo.name }}</p>
        <p class="level"><i class="iconfont" :class="teacherInfo.icon" />{{ teacherInfo.level }}</p>
      </div>
    </div>
    <div class="container">
      <a-tabs :active-key="tabActivity" @change="tabsChange">
        <a-tabs-tab-pane v-for="(tab,index) in tabOptions" :key="tab.key" :tab="tab.tab"></a-tabs-tab-pane>
      </a-tabs>
      <div v-if="tabActivity==1" class="teacher-info-brief">
        {{teacherBriefInfo}}
      </div>
      <div v-if="tabActivity==2">
        <a-row :gutter="[20,30]">
          <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="6" v-for="(course,index) in courseList" :key="index">
            <a-card hoverable style="width: 100%;">
              <template #cover>
                <img :src="course.img" alt="example">
              </template>
              <a-card-meta :title="course.title" :description="course.startTime"></a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>

  </section>
</template>
<script setup lang="ts">
import { $ref } from "vue/macros";

let tabActivity = $ref("1");
let tabOptions = [
  { key: "1", tab: "个人介绍" }, { key: "2", tab: "教学中" }
];
let teacherInfo = {
  avatarUrl: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
  name: "张志两",
  icon: "icon-task",
  level: "金牌讲师"
};
let teacherBriefInfo = "PMP、PgMP、OPME、NPDP、CSM、PMI-ACP、PMI-PBA、ITIL国际注册培训师(AACTP)。PMI《项目组合管理标准》第四版译者，" +
  "台湾中华专案管理协会OPM认证顾问师，国家外专局首批授权项目集管理讲师，国家外专局授权产品管理讲师，现代卓越集团金牌讲师，企业项目管理实战咨询顾问，" +
  "《项目管理视点》杂志编委，多年 PMI 大会特邀演讲嘉宾。工学硕士，多年世界500强企业项目管理、项目集管理、组织级项目管理经验。作为项目管理培训师与顾问，" +
  "拥有多年企业内训、认证考培辅导、企业项目管理咨询经验。大陆地区首批PMI-PBA（商业分析专业人士）认证获得者，首位OPME（组织级项目管理专家）认证拥有者，" +
  "并同时拥有PgMP（项目集管理专业人士）认证、PMI-ACP（敏捷项目管理专业人士）等认证。作为《项目管理视点》等杂志编委，曾发表过多篇项目管理类专业文章。" +
  "译有《从项目到项目集——项目经理成长手记》、《成功的采购项目管理》等专业书籍。作为咨询顾问，曾为中石油、中国移动、中信建投证券、北汽新能源、京东方、" +
  "科大讯飞、中广核核电运营有限公司等多家知名企业提供组织级项目管理专业咨询与培训服务。授课风格轻松幽默，将晦涩的理论与实战深度融合，让学员在清晰的框架" +
  "中掌握项目管理的科学知识，通过案例讨论的深度互动，帮助学员理清困惑点，解决实际问题，深受学员好评。";
const courseList = [
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  },
  {
    img: "https://sce7a8b2c1d4xr-sb-qn.qiqiuyun.net/files/course/2022/12-07/144741d6da06443157.jpg",
    title: "【第2版】NPDP考前大串",
    startTime: "2021-01-02"
  }
];
function tabsChange(activeKey: string) {
  tabActivity = activeKey;
}
</script>
<style scoped lang="less">
.teacher-info-top {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 140px;

  .teacher-info-top-bg {
    width: 100%;
    height: 100%;
    filter: blur(60px);
    position: absolute;
    z-index: 50;
  }

  .teacher-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    position: relative;
    z-index: 100;
  }

  .desc {
    margin-left: 20px;

    .name {
      font-size: 18px;
      position: relative;
      box-sizing: border-box;
      color: white;
      z-index: 100;
    }

    .level {
      position: relative;
      z-index: 100;
      font-size: 14px;
      color: white;
    }
  }
}
.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}
</style>
